<template>
    <div id="app" @mousemove="handleMouseMove">
      <div id="water" :style="dropStyle">
        <span class="time">{{ currentTime }}</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        mouseX: 0,
        mouseY: 0,
        currentTime: ''
      };
    },
    computed: {
      dropStyle() {
        return {
          '--clipX': `${this.mouseX}px`,
          '--clipY': `${this.mouseY}px`
        };
      }
    },
    methods: {
      handleMouseMove(event) {
        this.mouseX = event.pageX;
        this.mouseY = event.pageY;
      },
      updateTime() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        this.currentTime = `${hours}:${minutes}:${seconds}`;
      }
    },
    mounted() {
      this.updateTime();
      setInterval(() => {
        this.updateTime();
      }, 1000);
    }
  };
  </script>
  
  <style>
/* 原来的样式保持不变 */
.time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgb(189, 19, 19);
}


  body {
    background-color: #feffff;
  }
  #water {
    --clipX: 50%;
    --clipY: 50%;
    position: absolute;
    top: 20%;
    left: 15%;
    width: 200px;
    height: 200px;
    border-radius: 50%; /* 将水滴改成圆形 */
    box-shadow: 10px 20px 30px rgba(0,0,0,.5) inset,
                10px 10px 20px rgba(0,0,0,.3),
                15px 15px 30px rgba(0,0,0,.05),
                -10px -10px 15px rgba(255,255,255,.8) inset;
    animation: action 3s linear infinite;
  }
  #water::after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 40px;
    left: 28%;
    border-radius: 50%; /* 将水滴改成圆形 */
    background-color: rgba(255,255,255,.7);
    animation: action 3s linear infinite;
  }
  #water::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    top: 80px;
    left: 40%;
    border-radius: 50%; /* 将水滴改成圆形 */
    background-color: rgba(255,255,255,.7);
    animation: action 3s linear infinite;
  }
  /* 定义动画 */
  @keyframes action {
    25% {
      border-radius: 50%; /* 将水滴改成圆形 */
    }
    50% {
      border-radius: 77% 23% 46% 54% / 33% 63% 37% 67%;; /* 将水滴改成圆形 */
    }
    70% {
      border-radius: 49% 51% 63% 37% / 41% 73% 27% 59%; /* 将水滴改成圆形 */
    }
    100% {
      border-radius: 50%; /* 将水滴改成圆形 */
    }
  }
  </style>
  